<template>
  <div :id="id" class="main" :style="{width: '100%', height: '250px',}"></div>
</template>

<script>
  export default {
    name: 'SearchUserAvg',
    props: {

      height: {
        type: String,
        default: '300px'
      },
      text: {
        type: String,
        default: '柱状图'
      },
    //   dataSource: {
    //     type: Object,
    //     default: () => ({
    //       column:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //       values:[820, 932, 901, 934, 1290, 1330, 1320]
    //     })
    //   },
      dataSource: {
        type: Object,
        default: () => ({})
      },
      description: {
        type: String,
        default: '文本描述'
      }
    },
    data() {
      return {
        myChart: '',
        id: "searchUserAvgId"
      }
    },
    computed: {
    },
    methods: {
      setOption() {
        this.myChart.setOption({
          // color: ["#b0cce7"],
          color: ["#FAAD14"],
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: this.dataSource.column,
            axisLabel: {
              show: true,
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(0,0,0,0.45)'
              }
            },
            axisTick: {
              show: true
            },
            splitLine: {     //网格线
              show: false
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
            },
            axisLine:{
              show:false,
              lineStyle:{
                color:'rgba(0,0,0,0.45)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {     //网格线
              show: true
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params, callback) {
              return params[0].marker + params[0].axisValue + "</br>人均搜索：" + params[0].data;
            }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '0%',
              top: '10%',
              containLabel: true
          },
          series: [{
              data: this.dataSource.values,
              type: 'line',
              // areaStyle: {},
              smooth: true
          }]
        })
      },
      //初始化
      initEcharts() {
        let echarts = require("echarts");
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById(this.id), "light");
        // 绘制图表
        this.setOption();
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }
    },
    mounted() {
      // let echarts = require('echarts');
      // // 基于准备好的dom，初始化echarts实例
      // this.myChart = echarts.init(document.getElementById(this.id), 'light');
      // // 绘制图表
      // this.setOption();
      // window.addEventListener("resize", () => {
      //   this.myChart.resize();
      // })
    },
    watch: {
      dataSource: function () {
        this.setOption()
      }
    }
  }
</script>
